<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-05-06 02:23:23
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>主题列表</span>
            </div>
             <div class="filter-container">
                    <el-input v-model="listQuery.title" placeholder="请输入名称" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />

                <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                {{ '搜索' }}
                </el-button>
                 <el-button v-waves :disabled="!checkPermission(['survey.theme_create'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    {{ "添加" }}
                </el-button>
                <el-button v-waves :disabled="!checkPermission(['survey.theme_delete'])" class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatch">
                {{ '批量删除' }}
                </el-button>
                 <el-button v-waves  class="filter-item" type="info" style="margin-left:5px" icon="el-icon-download" @click="handleDownload">
                {{ '导入模板下载' }}
                </el-button>
                
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                @select="handleSelect"
                @select-all ="selectAll"
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
                 <el-table-column align="center" type="selection" width="55"> 
                </el-table-column> 
            <el-table-column  align="center" label="名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
     
            <el-table-column  align="center" label="排序">
                <template slot-scope="scope">
                    <span>{{ scope.row.sort }}</span>
                </template>
            </el-table-column>

                <el-table-column align="center" :label="'操作'">
                <template slot-scope="scope">
                    
                <el-button v-waves v-permission="['survey.theme_edit']"  type="primary"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                    {{ "编辑" }}
                </el-button>
                <el-button v-waves v-permission="['survey.theme_delete']"  type="danger" :destroy-on-close="true" size='mini' icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                        {{ "删除" }}
                </el-button>
                <el-upload
                    class="import"
                    :action="survey_question_imports"
                    accept=".csv"
                    :data="{id:scope.row.id}"
                    :before-upload="beforeImport"
                    :headers ="headerObj"
                    :on-success="handleImport"
                    :show-file-list="false"
                    >
                    <el-button icon="el-icon-download" size="mini" type="primary">导入</el-button>
                </el-upload>
                </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>

           <el-dialog :title="form_title" :visible.sync="dialogVisible"  width="30%" @close="getList" :close-on-click-modal=false>
                <el-form :model="form_data" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="名称" prop="title">
                        <el-input v-model="form_data.title" placeholder="请输入名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="form_data.sort" placeholder="请输入排序" :min="1" clearable></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                </div>
         </el-dialog>
    </div>
</template>

<script>

    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, del,create,edit,detail } from '@/api/survey' // api接口
    import Pagination from '@/components/Pagination' // 分页组件
    import { getToken } from '@/utils/auth'
    export default{
        name: 'survey_theme',
        components: { Pagination }, // 引入组件
        directives: { waves, permission }, // 引入指令
          data() {
            return {
             headerObj: {
                 'Authorization': 'Bearer ' + getToken()
            },
            survey_question_imports: process.env.VUE_APP_BASE_API + 'admin/survey_question_import',
            form_data:{
                title :'',
                sort :'',
                id : ''
            },
            rules: {
                    title: [ 
                        { required: true, message: "请输入名称", trigger: "blur" }
                    ], 
                },
            dialogVisible: false, // 是否显示弹框
            form_title: '添加', // 弹框标题
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
                },
            } 
        },
          created() {
            this.getList()
        },
        methods: {
            beforeImport(){ //导入前回调 
                this.listLoading = true;
            },
            
            handleImport(res) { // 导入
                if(!res.code) {
                    this.$message.error(res.msg)
                    this.listLoading = false;
                } else {
                    this.listLoading = false;
                    this.$message.success(res.msg);
                    this.getList()
                }
            },
              handleDownload(){
                 location.href = 'https://game.vrupup.com/resources/sam_base/survey.csv';
            },
            handleSelect(selection, row) { // 选中
                 this.select_ids = [];
                selection.map(item => {
                     this.select_ids.push(item.id);
                })
            },
             selectAll(selection) { // 全选
                 this.select_ids = [];
                selection.map(item => {
                     this.select_ids.push(item.id);
                })
            },

        
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            handleCreate() { // 新增对话框显示
              this.dialogVisible = true
            },
            handleEdit(index, row) { // 编辑对话框显示
              this.dialogVisible = true
              this.fetchData(row.id)
            },
            fetchData(id) { // 获取数据
                detail(id).then(res => {
                    this.form_data = res.data
                })
            },
            submitForm(formName) { // 提交表单
                var that = this;
                this.$refs[formName].validate((valid) => {
                  if (valid) {
                        if(this.form_data.id) { // 编辑
                            edit(that.form_data).then(res => {
                                this.$message.success(res.msg)
                                this.dialogVisible = false
                                this.$refs[formName].resetFields()
                            })
                        } else { // 新增
                            create(that.form_data).then(res => {
                                this.$message.success(res.msg)
                                this.dialogVisible = false
                                this.$refs[formName].resetFields()
                            })
                        }    
                    } else {
                        return false;
                    }  
            })},
            handleBatch() {  // 批量删除
                var that = this;
                if(this.select_ids.length == 0){
                    this.$message({
                        message: '请选择要删除的数据',
                        type: 'warning'
                    });
                    return false;
                }
                this.$confirm('确认删除选中的数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(this.select_ids.join(',')).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList();
                    }).catch(err => {
                        this.$message({
                            message: err.msg,
                            type: 'error'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDelete(index, row) { // 删除
                    const thiz = this
                    this.$confirm('确认要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        del(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1500,
                            onClose() {
                                thiz.list.splice(index, 1)
                            }
                        })
                        })
                    }).catch(() => {

                    })
                },
            getList() { // 获取列表
                this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.listLoading = false
                    })
                },
            }
    }
</script>

